<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生命周期钩子行数</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    {{msg}}
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: "hi vue"
      },
      // 在实例化之后，数据观测data observer和event/watcher事件配置之前调用
      beforeCreate: function() {
        console.log("beforeCreate");
      },
      // 在实例创建完成之后立即调用
      // 在这一步，实例已完成以下配置：数据观测data observer，属性和方法的运算，event/watcher事件回调
      // 然而，挂载阶段还未完成，$el属性目前不可见
      created: function () {
        console.log("created");
      },
      // 在挂载开始前被调用：相关的渲染函数被首次调用
      beforeMount: function() {
        console.log("beforeMount");
      },
      // el被新创建的$el替换，挂载成功
      mounted: function(){
        console.log("Mounted");
      },
      // 数据更新时调用
      beforeUpdate: function() {
        console.log("beforeUpdate");
      },
      // 组件dom已经更新，组件更新完毕
      updated: function() {
        
        console.log("updated");
      },

      beforeDestroy: function() {
        console.log("beforeDestroy");
      },
      destroyed: function() {
        console.log("destroyed");
      }
    })
    setTimeout(() => {
      vm.msg = "changed...";
    }, 2000);
  </script>
</body>
</html>